import styled from "styled-components";
import {LightFontColor} from "@/style/Color";

export const BoardContainer = styled.div`
  width: 100%;
  height: auto;
  margin-bottom: 50px;
  padding: 0 5px;
`

export const BoardItemContainer = styled.div`
  float: left;
  width: 100%;
  height: 40px;
  color: ${LightFontColor};
  padding: 10px 5px 0 5px;
  cursor: pointer;
  border: 1px solid rgb(0, 0, 0, 0);
  transition: //transform .30s cubic-bezier(0.645, 0.045, 0.355, 1),
          box-shadow .30s cubic-bezier(0.645, 0.045, 0.355, 1),
          border .3s cubic-bezier(0.645, 0.045, 0.355, 1),
          background-color .3s ease-in-out;

  &:hover {
    //color: #ffffff;
    //transform: translate(-5px, -5x);
    //background-color: #de680f;
    //box-shadow: 5px 5px 10px  rgba(203, 203, 203);
    color: #ffa42f;
    border-bottom: 1px solid #ffa42f;
  }

  span {
    display: block;
    font-size: 13px;
    line-height: 18px;
    font-weight: 600;
    width: calc(100% - 30px);
    text-align: center;
  }


  //.text {
  //  margin-top: 5px;
  //  text-align: center;
  //  display: block;
  //  width: 100%;
  //  float: left;
  //  font-size: 10px;
  //}
`
